﻿@page "/chart/stacked-column"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart'>Blazor Stacked Column Chart</a> example visualizes mobile game market for different countries with default stacked column series in the chart. Legend in the sample shows the information about those series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the stacked column type chart. The stacking column type chart stacks points in the series vertically and you can also use the <code>StackingGroup</code> property to group stacking collections based on categories.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the stacked column series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-column'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Mobile game market by countries" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" LabelIntersectAction="LabelIntersectAction.Rotate45">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Sales (in Billion)" Minimum="0" Maximum="500" Interval="100" LabelFormat="{value}B">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="UK_Trade" Width="2" Name="UK" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="GER_Trade" Width="2" Name="Germany" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="FR_Trade" Width="2" Name="France" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="IT_Trade" Width="2" Name="Italy" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StackedColumnChartData> ChartPoints { get; set; } = new List<StackedColumnChartData>
    {
        new StackedColumnChartData { Year = "2014", UK_Trade = 111.1, GER_Trade = 76.9, FR_Trade = 66.1, IT_Trade = 34.1 },
        new StackedColumnChartData { Year = "2015", UK_Trade = 127.3, GER_Trade = 99.5, FR_Trade = 79.3, IT_Trade = 38.2 },
        new StackedColumnChartData { Year = "2016", UK_Trade = 143.4, GER_Trade = 121.7, FR_Trade = 91.3, IT_Trade = 44.0 },
        new StackedColumnChartData { Year = "2017", UK_Trade = 159.9, GER_Trade = 142.5, FR_Trade = 102.4, IT_Trade = 51.6 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StackedColumnChartData
    {
        public string Year { get; set; }
        public double UK_Trade { get; set; }
        public double GER_Trade { get; set; }
        public double FR_Trade { get; set; }
        public double IT_Trade { get; set; }
    }

}
